<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    @@include('include/head.html',{
    "title":"canvas"
    })
    <style>
        #canvas {
            border: 1px solid #aaaaaa;
            display: block;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <div id="canvas-warp">
        <canvas id="canvas">
            一些简单的canvas使用.
        </canvas>
    </div>
    @@include('include/footer.html')
    <script>
        window.onload = function () {
            var canvas = $("canvas");
            canvas.width = 800;
            canvas.height = 600;
            var ctt = canvas.getContext("2d");
            ctt.fillStyle = "#FFF";
            ctt.fillRect(0, 0, 800, 600);

            for (var i = 1; i <= 10; i++) {
                ctt.save();
                ctt.translate(400, 300);
                ctt.rotate(36 * i * Math.PI / 180);
                ctt.fillStyle = "rgba(255,0,0,0.25)";
                ctt.fillRect(0, -200, 200, 200);
                ctt.restore();
            }
        };
    </script>
</body>

</html>